import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Button, DatePicker } from 'antd';
import { DICT } from '../enum';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelect } from '@/components/DropDownSelect/index';
import { getQueryString } from '@/utils/util';

const { RangePicker } = DatePicker;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  handleExport: Function,
  dict?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;

@connect(({ analyse_maintenance }) => ({
  dict: analyse_maintenance.dict,
}))
class Search extends Component<Props, any> {

  state = {
    status: getQueryString('status') || ''
  };

  componentDidMount() {
    const { dispatch, form } = this.props;
    dispatch({
      type: 'analyse_maintenance/queryDict',
      payload: { keyList: DICT }
    });
    if (this.state.status) {
      form.setFieldsValue({
        status: this.state.status
      })
    }
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'analyse_alarm/updateCond',
          payload: values
        });
        this.props.initCurrent()
      }
    });
  };

  onChange = e => {

  }

  onOk = e => {

  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={1} span={6}>
            <FormItem
              label="维保时间"
              {...formItemLayout}
            >
              {getFieldDecorator('createTime')(
                <RangePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={['开始日期', '结束日期']}
                  onChange={this.onChange}
                  onOk={this.onOk}
                />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={18}>
            <SearchRow type="flex" justify="end">
              <SearchButton>搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
